<template>
  <div class="Daily_Material_Application">
    <div class="Daily_Material_Application_Top">
      <span>温馨提示：如您已提交申请，请耐心等待评审结果，勿重复提交！</span>
    </div>
    <div class="Daily_Material_Application_buttom">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="申请人:">
          <el-input :disabled="true" v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="团队名称:">
          <el-input :disabled="true" v-model="form.TeamName"></el-input>
        </el-form-item>

        <el-form-item label="申请物品:">
          <el-select
            v-model="form.typeName"
            filterable
            clearable
            placeholder="请选择物品类别"
            @change="select1"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
          <span class="line">——</span>
          <el-select
            v-model="form.itemsName"
            :disabled="disabled"
            filterable
            clearable
            placeholder="请选择物品名称"
            @change="select2"
          >
            <el-option
              v-for="item1 in options1"
              :key="item1.id"
              :value="item1.id"
              :label="item1.name"
            >
            </el-option>
          </el-select>
          <span class="residue" v-if="num == 0" style="color: red"
            >剩余:{{ num }}</span
          >
          <span class="residue" v-else>剩余:{{ num }}</span>
        </el-form-item>
        <el-form-item label="申请数量:">
          <el-input-number
            v-model="form.Quantities"
            :min="1"
            :max="num"
            type="number"
          >
          </el-input-number>
        </el-form-item>

        <el-form-item label="申请时段:">
          <el-date-picker
            ref="pickerRef"
            style="width: 100%"
            v-model="form.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请理由:" id="Reason_for_application">
          <el-input
            placeholder="请阐述申请理由"
            type="textarea"
            autosize
            v-model="form.description"
          >
          </el-input>
        </el-form-item>
        <div class="Daily_Material_Application_Submit">
          <el-button type="button" @click="onSubmit">提交</el-button>
          <el-button type="button" @click="empty_form">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  props: {},
  components: {},
  data() {
    return {
      disabled: true,
      num: 1,
      form: {
        name: " ",
        TeamName: "",
        typeName: "",
        itemsName: "",
        num: 1,
        Quantities: "",
        time: "",
        description: "",
      },
      options: [],
      value: "",
      options1: [],
    };
  },
  methods: {
    //申请物品
    async select1(value) {
      this.disabled = false;
      this.form.itemsName = "";
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/usual/getItemsNum?typeId=" + value,
      });
      console.log(value);
      this.options1 = res.msg;
      console.log(this.options1);
    },

    //提交表单
    async onSubmit() {
      if (this.num == 0) {
        this.$message.error("物品已经没有啦");
        return;
      }
     

      const self = this;
      console.log(self.$refs.pickerRef.displayValue[0]);
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "post",
        url: "/api/usual/applySupplies",
        data: {
          typeId: self.form.typeName,
          itemsId: self.form.itemsName,
          description: self.form.description,
          num: self.form.Quantities,
          useTime: self.$refs.pickerRef.displayValue[0],
          expectReturnTime: self.$refs.pickerRef.displayValue[1],
        },
      });
      //提交失败
      if (res.code != 200) {
        this.$message.error("提交失败");
      }
      this.$message.success("提交成功");
      this.form.typeName = "";
      this.form.itemsName = "";
      this.num = "";
      this.form.Quantities = "";
      this.form.time = "";
      this.form.description = "";
    },

    //物品剩余数量
    select2(value) {
      for (var i in this.options1) {
        if (this.options1[i].id == value) {
          this.num = this.options1[i].num;
        }
      }
    },

    //点击“取消”
    empty_form() {
      this.form.typeName = "";
      this.form.itemsName = "";
      this.num = "";
      this.form.Quantities = "";
      this.form.time = "";
      this.form.description = "";
    },

    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.onSubmit();
        return;
      }
    },
    handleCommand(command) {
      this.form.Roadshow_batch = command;
      // this.$message.success(command);
    },
    //确认按钮
    handleEdit(index, row) {
      console.log(index, row);
      row.repaisStatus = true;
    },
    //监听页码值改变的事件
    handleCurrentChange(newSize) {
      this.page = newSize;
      this.get_Repair_history();
    },
  },
  mounted() {
    //绑定事件
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown);
  },
  async created() {
    this.form.name = window.localStorage.getItem("name");
    this.form.TeamName = window.sessionStorage.getItem("TeamName");
    const { data: res } = await this.$http({
      headers: { "Content-Type": "application/json;charset=UTF-8" },
      method: "get",
      url: "/api/usual/getSuppliesTypes",
    });
    this.options = res.msg;
    console.log(res);
  },
};
</script>

<style lang="less">
.Daily_Material_Application {
  height: 98%;
  width: 95%;
  margin: 10px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.Daily_Material_Application_Top {
  display: flex;
  height: 50px;
  span {
    border-radius: 10px;
    width: 900px;
    background-color: rgb(229, 240, 255);
    margin: auto;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
}

.Daily_Material_Application_buttom {
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.04);
  height: 90%;
  width: 90%;
  display: flex;
  flex-direction: column;
  margin-left: 7%;
  .el-form {
    display: flex;
    flex-direction: column;
    height: 90%;
    // width: 90%;
    margin: 0px auto;
    margin-top: 1%;
    .el-form-item {
      display: flex;
      flex-direction: row;
      height: 10%;
      .el-form-item__label {
        font-size: 20px;
        // line-height: 60px;
        font-weight: bold;
        width: 150px !important;
        // text-align: center;
        // float: right;
      }
    }
  }
}
.Remaining_Items {
  color: rgb(170, 170, 170);
  margin-left: 50px;
}
.Daily_Material_Application_Submit {
  height: 80px;
  width: auto;
  display: flex;
  // margin-top: 50px;
  margin: 0px auto;
  button {
    width: 200px;
    border: none;
    height: 50px;
    margin-top: 40px;
  }
  button:nth-child(1) {
    background-color: rgb(0, 110, 255);
    font-size: 20px;
    color: white;
    font-weight: bolder;
    border-radius: 5%;
  }
  button:nth-child(2) {
    background-color: rgb(242, 242, 242);
    margin-left: 150px;
    color: black;
    border-radius: 5%;
    font-weight: bolder;
    font-size: 20px;
  }
}
#Reason_for_application {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 15%;
  .el-textarea__inner {
    display: flex;
    width: 200%;
    font-size: 25px;
    height: 15%;
  }
}
.residue {
  width: 60px;
  margin-left: 50px;
  color: grey;
}
</style>